<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import { geoCoordMap, rCity } from "./data.js";
import geoJson from "./geoJson.json";

let myChart = ref<any>();
let baseTexture = ref<any>(null);
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("map"));
  getBaseTexture();
});

function getBaseTexture() {
  echarts.registerMap("world", geoJson as any);
  let canvas = document.createElement("canvas");
  baseTexture = echarts.init(canvas, null, {
    width: 1920,
    height: 1080
  });
  baseTexture.setOption({
    backgroundColor: "#001213",
    series: [
      {
        type: "map",
        map: "world",
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        boundingCoords: [
          [-180, 90],
          [180, -90]
        ],
        label: {
          show: false,
          textStyle: {
            color: "#fff",
            fontSize: 20
          }
        },
        itemStyle: {
          areaColor: "#004444",
          borderColor: "#00cccc",
          borderWidth: 2
        }
      }
    ]
  });

  drawEarth();
}
const alirl = [
  [
    [121.15, 31.89],
    [121.48, 31.22]
  ],
  [
    [120.38, 37.35],
    [121.48, 31.22]
  ],
  [
    [123.97, 47.33],
    [121.48, 31.22]
  ],
  [
    [118.87, 42.28],
    [121.48, 31.22]
  ],
  [
    [121.52, 36.89],
    [121.48, 31.22]
  ],
  [
    [102.188043, 38.520089],
    [121.48, 31.22]
  ],
  [
    [118.58, 24.93],
    [121.48, 31.22]
  ],
  [
    [120.53, 36.86],
    [121.48, 31.22]
  ],
  [
    [119.46, 35.42],
    [121.48, 31.22]
  ],
  [
    [119.97, 35.88],
    [121.48, 31.22]
  ],
  [
    [121.05, 32.08],
    [121.48, 31.22]
  ],
  [
    [91.11, 29.97],
    [121.48, 31.22]
  ]
];
const drawEarth = () => {
  let option = {
    tooltip: {
      show: true
    },
    globe: {
      silent: true,
      shading: "color",
      environment: "#000",
      baseTexture: baseTexture
    },

    series: [
      //柱状图
      {
        //name: 'bar3D',
        type: "bar3D",
        coordinateSystem: "globe",
        barSize: 0.5, //柱子粗细
        shading: "lambert",
        opacity: 1,
        bevelSize: 0.2,
        itemStyle: {
          color: "#EBE806"
        },
        label: {
          show: false,
          formatter: "{b}"
        },
        data: convertData(rCity)
      },
      {
        name: "lines3D",
        type: "lines3D",
        coordinateSystem: "globe",
        effect: {
          show: true,
          period: 2,
          trailWidth: 3,
          trailLength: 0.5,
          trailOpacity: 1,
          trailColor: "#0087f4"
        },
        blendMode: "lighter",
        lineStyle: {
          // width: 2
          width: 1,
          color: "#0087f4",
          opacity: 0
        },
        data: [],
        silent: false
      },

      {
        type: "lines3D",

        coordinateSystem: "globe",

        effect: {
          show: true,
          trailWidth: 5,
          trailOpacity: 1,
          trailLength: 0.2,
          constantSpeed: 5
        },

        blendMode: "lighter",

        lineStyle: {
          //航线的视图效果
          color: "#EBE806",
          width: 1,
          opacity: 1
        },

        data: alirl
      }
    ]
  };
  console.log(option);
  for (let i = 0; i < 50; i++) {
    option.series[1].data = option.series[1].data.concat(rodamData() as any);
  }

  myChart.value.clear();
  myChart.value.setOption(option, true);
};
const rodamData = () => {
  // let name = '随机点' + Math.random().toFixed(5) * 100000
  // let longitude = Math.random() * 62 + 73
  let longitude = 105.18;
  let longitude2 = Math.random() * 360 - 180;
  // let latitude = Math.random() * 50 + 3.52
  let latitude = 37.51;
  let latitude2 = Math.random() * 180 - 90;
  return {
    coords: [
      [longitude2, latitude2],
      [longitude, latitude]
    ],
    value: (Math.random() * 3000).toFixed(2)
  };
};
const convertData = (data: any) => {
  var res = [];
  for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  // console.log(res)
  return res;
};
</script>

<style scoped lang="scss">
.container {
  width: 1920px;
  height: 1080px;
}
#map {
  width: 100%;
  height: 100%;
}
</style>
./data.js
